<template>
  <a-card :bordered="false">
     <!-- 详情列表 -->
<template>
  <a-descriptions title="对账详细" layout="vertical">
    <a-descriptions-item label="供应商名称">
      {{this.companyName}}
    </a-descriptions-item>
    <a-descriptions-item label="供应商编号">
      {{this.workNo}}
    </a-descriptions-item>
    <a-descriptions-item label="联系电话">
     {{this.phone}}
    </a-descriptions-item>
    <a-descriptions-item label="对账金额" span="2">
     {{this.duizhangmoney}}元
    </a-descriptions-item>
    <a-descriptions-item label="订单数量(条)">
     {{this.ordernums}}
    </a-descriptions-item>
  </a-descriptions>
  <!-- <a-button @click="see_addReconciliation()" type="primary" icon="plus" style="color: #F9D532;width: 200px;height: 36px;background: #333333;border-style: none;">新增对账记录</a-button> -->
</template>

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <template>
      <div class="container">
        <div class="top">
          <div class="wid" style="float: left;">
           
            <!--            <a href="#"><i class="el-icon-arrow-left"></i>返回</a>-->
          </div>
        </div>
        <div class="order">
          <div class="wid" style="float: left">
            <span @click="bubu(1)">面料</span>
            <span @click="bubu(2)">成本</span>
            <span @click="bubu(3)">工艺</span>
            <span @click="bubu(4)">返修</span>
          </div>
        </div>
      </div>
    </template>
    <template>
      <div class="ant-alert ant-alert-info"
           style="margin-bottom: 5px;height:50px;background-color: #ffffff;margin-top: 120px;border: none;">
      </div>
    </template>
    <div>
      <div class="ant-alert ant-alert-info"
           style="margin-bottom: 10px;height: 40px;border: none;background-color: #ffffff;">
        <h4 class="anticon anticon-info-circle ant-alert-icon" style="color: #000c17;margin-top: 10px;border: none;">
          {{neirong}}</h4>
      </div>

      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
               :pagination="ipagination"
               :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               class="j-table-force-nowrap"
               @change="handleTableChange" style="margin-left: 10px;margin-right: 20px;" v-show="this.tabs==1">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">
            下载
          </a-button>
        </template>


        <span slot="action" slot-scope="text, record">
                   <a @click="seeupdatejiesuanMoney(record.prodId,record.fabricSettleMoney,1)">修改结算金额</a>
        </span>
      </a-table>
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns2" :dataSource="dataSource"
               :pagination="ipagination"
               :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               class="j-table-force-nowrap"
               @change="handleTableChange" style="margin-left: 10px;margin-right: 20px;" v-show="this.tabs==2">
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">
            下载
          </a-button>
        </template>
        <span slot="action" slot-scope="text, record">
         <a @click="seeupdatejiesuanMoney(record.id,record.amountMoney,2)">修改结算金额</a>
        </span>
      </a-table>

      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns3" :dataSource="dataSource"
               :pagination="ipagination"
               :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               class="j-table-force-nowrap"
               @change="handleTableChange" style="margin-left: 10px;margin-right: 20px;" v-show="this.tabs==3">
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
           <a @click="seeupdatejiesuanMoney(record.id,record.accountMoney,3)">修改结算金额</a>
        </span>
      </a-table>

      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns4" :dataSource="dataSource"
               :pagination="ipagination"
               :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               class="j-table-force-nowrap"
               @change="handleTableChange" style="margin-left: 10px;margin-right: 20px;" v-show="this.tabs==4">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
           <a @click="seeupdatejiesuanMoney(record.id,record.accountMoney,4)">修改结算金额</a>
        </span>
      </a-table>

      <!-- 劳务公司记录 -->
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns5" :dataSource="dataSource"
               :pagination="ipagination"
               :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               class="j-table-force-nowrap"
               @change="handleTableChange" style="margin-left: 10px;margin-right: 20px;" v-show="this.tabs==5">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <!--          <a @click="see_companyDetail(record.id)">查看</a>-->
        </span>
      </a-table>
    </div>
      <!-- 表单区域 -->
    <jeecgDemo-modal ref="modalForm2" @ok="chongzhi"></jeecgDemo-modal>

    <!-- 一对多表单区域 -->
    <!-- <JeecgDemoTabsModal ref="jeecgDemoTabsModal" @ok="modalFormOk"></JeecgDemoTabsModal> -->

  <lgyxTrainData-modalZ ref="modalForm" @ok="modalFormOk"></lgyxTrainData-modalZ>
  <updatejiesuanMoney ref="seeupdatejiesuanMoney" @aaa="bubu(1)" ></updatejiesuanMoney>
  </a-card>
</template>

<script>
	import updatejiesuanMoney from './modules/updatejiesuanMoney'
import lgyxTrainDataModalZ from './modules/LgyxTrainDataModalZ'
  import JeecgDemoModal from './modules/JeecgDemoModal'
  import '@/assets/less/TableExpand.less'
  import '@/assets/less/style.min.css'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import {
    query_companydetailinfo
  } from '@/api/api'
  import {
    query_companyjiedaninfo
  } from '@/api/api'
  import {
    query_company_commissionlist
  } from '@/api/api'
  import {
    deleteAction,
    getAction,
    putAction,
    postAction,
    downFile,
    getFileAccessHttpUrl
  } from '@/api/manage'

  export default {
    name: 'SupplierReconciliation',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
       lgyxTrainDataModalZ,
     updatejiesuanMoney,
   JeecgDemoModal
    },
    data () {
      return {
		  workNo:'',
				id:'',
		  starttime:'',
		  endtime:'',
		  businesslicense:'',
		   phone:'',
		   ordernums:'',
		   duizhangmoney:'',
        userId:"",
          customertype:'',
        companyName:'',
        companyCode:'',
        aboutPerson:'',
        aboutPhone:'',
        monthLines:'',
        description: 'lgyx_pickorder_info管理页面',
        companyDetailbyid: [],
        sexl: '',
        usersource: '',
        certification: '',
        tabs: 1,
        neirong: '业务流水',
        dictOptions: {},
        dataSource: [],
        shinumber: 0,
        columns: [
           {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
          title: '成本项',
          align: 'center',
          dataIndex: 'chengbenxiang',
        },
				{
				  title: '面料编号',
				  align: 'center',
				  dataIndex: 'mianliaoCode',
				},
				{
				  title: '米数',
				  align: 'center',
				  dataIndex: 'mishu',
				},
          {
            title: '订单编号',
            align: 'center',
            dataIndex: 'orderSn'
          },
          {
            title: '生成时间',
            align: 'center',
            dataIndex: 'createTime'
          },
		  {
		    title: '成本金额',
		    align: 'center',
		    dataIndex: 'costMoney'
		  },
		  {
		    title: '结算金额',
		    align: 'center',
		    dataIndex: 'fabricSettleMoney'
		  },
		  {
		    title: '操作',
		    dataIndex: 'action',
		    align: "center",
		    scopedSlots: {
		      filterDropdown: 'filterDropdown',
		      filterIcon: 'filterIcon',
		      customRender: 'action'},
		  }
        ],
        columns2: [
          
           {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },{
          title: '品类',
          align: 'center',
          dataIndex: 'costName'
        },
				{
				  title: '成本项',
				  align: 'center',
				  dataIndex: 'categoryName'
				},
          {
            title: '订单编号',
            align: 'center',
            dataIndex: 'orderSn'
          },
         
          {
            title: '成本价格',
            align: 'center',
            dataIndex: 'price'
          },
       
          {
            title: '对账金额',
            align: 'center',
            dataIndex: 'amountMoney'
          },
		  {
		    title: '创建时间',
		    align: 'center',
		    dataIndex: 'createTime'
		  },
		  {
		    title: '操作',
		    dataIndex: 'action',
		    align: "center",
		    scopedSlots: {
		      filterDropdown: 'filterDropdown',
		      filterIcon: 'filterIcon',
		      customRender: 'action'},
		  }
         
        ],

        columns3: [
           {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
          title: '订单编号',
          align: 'center',
          dataIndex: 'orderSn',
        
        },
		{
		  title: '工艺',
		  align: 'center',
		  dataIndex: 'categoryName',
		
		},
          {
            title: '成本金额',
            align: 'center',
            dataIndex: 'costPrice'
          },
          {
            title: '结算金额',
            align: 'center',
            dataIndex: 'accountMoney'
          },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
		{
		  title: '操作',
		  dataIndex: 'action',
		  align: "center",
		  scopedSlots: {
		    filterDropdown: 'filterDropdown',
		    filterIcon: 'filterIcon',
		    customRender: 'action'},
		}
        ],

        columns4: [
     {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
       {
         title: '订单编号',
         align: 'center',
         dataIndex: 'orderSn',
       },
	   {
	     title: '返修部位',
	     align: 'center',
	     dataIndex: 'sizeName',
	   },
	   
          {
            title: '成本金额',
            align: 'center',
            dataIndex: 'costPrice'
          },
		  {
		    title: '对账金额',
		    align: 'center',
		    dataIndex: 'accountMoney'
		  },
		  
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'createTime'
          },
         {
           title: '操作',
           dataIndex: 'action',
           align: "center",
           scopedSlots: {
             filterDropdown: 'filterDropdown',
             filterIcon: 'filterIcon',
             customRender: 'action'},
         }
          

        ],

       
        url: {
           detail:"/Finance/getcompanydetail",
          list: "/Finance/getCompanyBusinessList?companyCode="+this.$route.query.companyCode,
           rollbackMoney:"/Finance/rollbackMoney",
		    duizhangdetail:"/Supplier/duizhangdetail"
        },
      }
    },
    created () {   
		this.starttime=this.$route.query.starttime;
		this.endtime=this.$route.query.endtime;
		this.getduizhangdetail();
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      },
    },
    methods: {
		seeupdatejiesuanMoney: function (id,money,type) {
		     this.$refs.seeupdatejiesuanMoney.edit(id,money,type);
		     this.$refs.seeupdatejiesuanMoney.title = "修改结算金额";
		     this.$refs.seeupdatejiesuanMoney.disableSubmit = false;
		   },
    getduizhangdetail(){
       getAction(this.url.duizhangdetail,{"id":this.$route.query.id}).then((res)=>{
           if(res.success){
              this.companyName=res.result.companyName,
               this.businesslicense=res.result.businesslicense,
            this.phone=res.result.phone,
              this.ordernums=res.result.ordernums,
             this.duizhangmoney=res.result.duizhangmoney,
											 this.id=res.result.id,
									 this.workNo=res.result.workNo		 
											 
              }else{
                this.$message.warning(res.message);
              }

          })
              
      },
        //打开设置月结的窗口
    setyuejiewindow: function () {
      this.$refs.modalForm.edit(this.$route.query.userId);
      this.$refs.modalForm.title = "设置月结";
      this.$refs.modalForm.disableSubmit = false;
    },
      initDictConfig () {

      },

      bubu (e) {
        this.tabs = e
        this.dataSource = []
        this.ipagination.total = 0
        this.ipagination.pageSize = 10
        if (this.tabs == 1) {
          this.neirong = '面料'
          this.loading = true
          let params = this.$route.query.id
          getAction('/Supplier/getSysuserAllOrderFabric', {
            sysuserId: params,starttime:this.starttime,endtime:this.endtime
          }).then((res) => {
            this.loading = false
            if (res.success) {
              this.dataSource = res.result.records
              this.ipagination.total = res.result.total
              this.ipagination.current = '1'
               this.url.list = '/Supplier/getSysuserAllOrderFabric?sysuserId=' + params
            }
          })
        } else if (this.tabs == 2) {
          this.neirong = '成本'
          this.loading = true
          let params = this.$route.query.id
          getAction('/Supplier/getSysuserPingleicost', {
            sysuserId: params,starttime:this.starttime,endtime:this.endtime
          }).then((res) => {
            this.loading = false
            if (res.success) {
              this.dataSource = res.result.records
              this.ipagination.total = res.result.total
              this.ipagination.current = '1'
              this.url.list = '/Supplier/getSysuserPingleicost?sysuserId=' + params
            }
          })
        } else if (this.tabs == 3) {
          this.neirong = '门店列表'
          this.loading = true
          let params = this.$route.query.id
          getAction('/Supplier/getSysuserpaidangongyi', {
            sysuserId: params,starttime:this.starttime,endtime:this.endtime
          }).then((res) => {
            this.loading = false
            if (res.success) {
              this.dataSource = res.result.records
              this.ipagination.total = res.result.total
              this.ipagination.current = '1'
              this.url.list = '/Supplier/getSysuserpaidangongyi?sysuserId=' + params
            }
          })
        } else if (this.tabs == 4) {
          // alert(e)
          this.neirong = '返修'
          this.loading = true
         let params = this.$route.query.id
          getAction('/Supplier/getSysuserpaidanrepair', {
            sysuserId: params,starttime:this.starttime,endtime:this.endtime
          }).then((res) => {
            this.loading = false
            if (res.success) {
              this.dataSource = res.result.records
              this.ipagination.total = res.result.total
              this.ipagination.current = '1'
              this.url.list = '/Supplier/getSysuserpaidanrepair?sysuserId=' + params
            }
          })
        } else if (this.tabs == 5) {
          // alert(e)
          this.neirong = '劳务公司记录'
          this.loading = true
          let params = this.$route.query.userid
          getAction('/comhis/list', {
            id: params
          }).then((res) => {
            this.loading = false
            if (res.success) {
              this.dataSource = res.result.records
              this.ipagination.total = res.result.total
              this.ipagination.current = '1'
              this.url.list = '/comhis/list?id=' + params
            }
          })
        }
      }
    }
  }
</script>
<style scoped>
  .cd {
    display: none;
  }

  .cs {
    display: block;
  }

  @import '~@assets/less/common.less';
</style>
